import React, { useEffect, useState, useRef } from 'react';
import AMapLoader from "@amap/amap-jsapi-loader";
import '../../css/yjh/MapContainer.css'

const MapContainer = () => {


    const [scaleVisible, setScaleVisible] = useState(false);
    const [toolBarVisible, setToolBarVisible] = useState(false);
    const [controlBarVisible, setControlBarVisible] = useState(false);
    const [overViewVisible, setOverViewVisible] = useState(false);
    const [mapTypeVisible, setMapTypeVisible] = useState(false);
    const mapRef = useRef(null); // 使用 useRef 来存储 map 实例
    const controlsRef = useRef({}); // 使用 useRef 来存储控件实例
    const placeSearchRef = useRef(null); // 使用 useRef 来存储 PlaceSearch 实例
    useEffect(() => {
        window._AMapSecurityConfig = {
            securityJsCode: "a046526e86c30255d09891045529dc52",
        };
        AMapLoader.load({
            key: "d846aa01f39e0b56e9c9264e26f02fd7", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 版本号
            plugins: ["AMap.Scale", "AMap.HawkEye", 'AMap.ToolBar', 'AMap.ControlBar'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        })
            .then((AMap) => {

                const map = new AMap.Map("container", {
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 11, // 初始化地图级别
                    center: [115.485083,38.814709], // 初始化地图中心点位置
                });
                
                mapRef.current = map


                map.on('click', onClick)

            })
            .catch((e) => {
                console.log(e);
            });

        return () => {
            mapRef.current?.destroy();
        };
    }, []);

    // 动态更新控件
    useEffect(() => {
        if (!mapRef.current) return;

        const map = mapRef.current;

        // 清理旧的控件
        Object.values(controlsRef.current).forEach(control => {
            map.removeControl(control);
        });

        // 初始化新的控件
        controlsRef.current = {};

        if (scaleVisible) {
            const scale = new AMap.Scale();
            map.addControl(scale);
            controlsRef.current.scale = scale;
        }

        if (toolBarVisible) {
            const toolBar = new AMap.ToolBar({
                position: { top: '110px', right: '40px' },
            });
            map.addControl(toolBar);
            controlsRef.current.toolBar = toolBar;
        }

        if (controlBarVisible) {
            const controlBar = new AMap.ControlBar({
                position: { top: '10px', right: '10px' },
            });
            map.addControl(controlBar);
            controlsRef.current.controlBar = controlBar;
        }

        if (overViewVisible) {
            const overView = new AMap.HawkEye();
            map.addControl(overView);
            controlsRef.current.overView = overView;
        }

        if (mapTypeVisible) {
            AMap.plugin(['AMap.MapType'], function () {
                const mapType = new AMap.MapType({
                    defaultType: 0,
                    showLabel: true,
                    showRoad: true,
                    position: { top: '10px', right: '140px' },
                });
                map.addControl(mapType);
                controlsRef.current.mapType = mapType;
            });
        }
    }, [scaleVisible, toolBarVisible, controlBarVisible, overViewVisible, mapTypeVisible]);

    // 声明点击事件的回调函数(某一具体位置的天气预报)
    async function onClick(e) {
        let { lng, lat } = e.lnglat
        const marker = new AMap.Marker({
            position: [lng, lat], // 标记的位置
            map: mapRef.current, // 关联地图实例
            icon: "//vdata.amap.com/icons/b18/1/2.png", //添加 icon 图标 URL
            offset: new AMap.Pixel(-10, -10),
        });
        const result = await getCity({ lng, lat });
        console.log(result);

        let city;
        if (mapRef.current.getZoom() >= 10) {
            city = result.regeocode.addressComponent.district
        } else {
            city = result.regeocode.addressComponent.province;
        }
        AMap.plugin('AMap.Weather', function () {
            var weather = new AMap.Weather();
            //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
            weather.getLive(city, function (err, data) {
                if (!err) {
                    var str = [];
                    str.push('<h4 >实时天气' + '</h4><hr>');
                    str.push('<p>城市/区：' + data.city + '</p>');
                    str.push('<p>天气：' + data.weather + '</p>');
                    str.push('<p>温度：' + data.temperature + '℃</p>');
                    str.push('<p>风向：' + data.windDirection + '</p>');
                    str.push('<p>风力：' + data.windPower + ' 级</p>');
                    str.push('<p>空气湿度：' + data.humidity + '</p>');
                    str.push('<p>发布时间：' + data.reportTime + '</p>');
                    var infoWin = new AMap.InfoWindow({
                        content: `<div class="info" style={{position:'inherit';margin-bottom:0;backgroudColor:'white'}}>${str.join('')}</div><div className="sharp"></div>`,
                        isCustom: true,
                        offset: new AMap.Pixel(0, -37)
                    });
                    infoWin.open(mapRef.current, marker.getPosition());
                    marker.on('mouseover', function () {
                        infoWin.open(mapRef.current, marker.getPosition());
                    });
                    marker.on('mouseout', function () {
                        infoWin.close();
                    });
                }
            });
        })
        marker.on("click", function (e) {
            console.log("移除了Marker标记点");
            marker.setMap(null); // 移除标记点
        });
    }


    // 封装 getAddress 为返回 Promise 的函数(逆向：经纬度转换为城市)
    function getCity({ lng, lat }) {
        return new Promise((resolve, reject) => {
            AMap.plugin('AMap.Geocoder', function () {
                const geocoder = new AMap.Geocoder({
                    city: '010', // 城市编码
                });

                const lnglat = [lng, lat];

                geocoder.getAddress(lnglat, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        resolve(result); // 成功时返回结果
                    } else {
                        reject(new Error('获取地址失败')); // 失败时抛出错误
                    }
                });
            });
        });
    }



    const [startPoint, setStartPoint] = useState('');
    const [endPoint, setEndPoint] = useState('');
    const [panelBoxVisible, setPanelBoxVisible] = useState(false);
    const [isPanel, setIsPanel] = useState(false);
    const drivingRef = useRef(null); // 使用 useRef 来存储驾车规划实例
    //规划路线
    const handleRoutePlanning = () => {
        if (!mapRef.current || !startPoint || !endPoint) {
            alert('请输入起点和终点');
            return;
        }
        localStorage.setItem('inputValue', JSON.stringify({
            name: endPoint,
          }))
        setIsPanel(true)
        // 引入驾车规划插件
        AMap.plugin(['AMap.Driving'], function () {
            // 创建驾车规划实例
            const driving = new AMap.Driving({
                map: mapRef.current, // 关联地图实例
                panel: 'panel', // 结果展示面板的 ID
            });

            // 将驾车规划实例存储在 ref 中
            drivingRef.current = driving;

            // 定义起点和终点
            const points = [
                { keyword: startPoint, city: 'start' }, // 起点
                { keyword: endPoint, city: 'end' }, // 终点
            ];

            // 调用搜索方法
            driving.search(points, function (status, result) {
                if (status === 'complete') {
                    console.log('驾车路线规划成功:', result);
                } else {
                    console.error('驾车路线规划失败:', result);
                }
            });
        });
    };

    const noHandleRoutePlanning = () => {
        setIsPanel(false)
        setStartPoint('')
        setEndPoint('')
        // 清除路线
        if (drivingRef.current) {
            drivingRef.current.clear(); // 清除地图上的路线
            drivingRef.current = null; // 销毁驾车规划实例
        }

        // 清空结果展示面板的内容
        const panel = document.getElementById('panel');
        if (panel) {
            panel.innerHTML = ''; // 清空面板内容
        }
    }

    const [keyCar, setKeyCar] = useState('');
    const [carTab, setCarTab] = useState(1)
    const [isCar, setIsCar] = useState(false)
    const [keyCity, setKeyCity] = useState('')

    //站点关键字搜索
    const onKeyCar = () => {
        AMap.plugin(["AMap.StationSearch"], function () {
            //实例化公交站点查询插件
            var station = new AMap.StationSearch({
                city: "010", //限定查询城市，可以是城市名（中文/中文全拼）、城市编码
            });
            //执行关键字查询
            station.search(keyCar, function (status, result) {
                console.log(111);

                //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
                if (status === "complete" && result.info === "OK") {
                    var stationArr = result.stationInfo; //查询成功时，result.stationInfo 即为公交站点详细信息
                    for (var i = 0; i < stationArr.length; i++) {
                        //绘制点标记 Marker
                        var marker = new AMap.Marker({
                            //点标记中显示的图标
                            icon: new AMap.Icon({
                                image: "//a.amap.com/jsapi_demos/static/resource/img/pin.png",
                                size: new AMap.Size(32, 32),
                                imageSize: new AMap.Size(32, 32),
                            }),
                            offset: new AMap.Pixel(-16, -32), //点标记显示位置偏移量
                            position: stationArr[i].location, //点标记在地图上显示的位置
                            map: mapRef.current, //显示该覆盖物的地图对象
                        });
                        //构造 marker 的信息窗体
                        marker.info = new AMap.InfoWindow({
                            content: stationArr[i].name, //信息窗体的显示内容
                            offset: new AMap.Pixel(0, -30),
                        });
                        //鼠标悬停时显示该 marker 的信息窗体
                        marker.on("mouseover", function (e) {
                            e.target.info.open(mapRef.current, e.target.getPosition());
                        });
                    }
                }
                //将覆盖物调整到合适视野
                mapRef.current.setFitView();
            });
        });
    }

    //查询某一个城市的公交线路名称
    const onLineCar = () => {
        AMap.plugin(["AMap.LineSearch"], function () {
            //实例化公交线路查询插件
            var linesearch = new AMap.LineSearch({
                city: keyCity ? keyCity : "北京", //限定查询城市，可以是城市名（中文/中文全拼）、城市编码
                extensions: "all", //是否返回公交线路详细信息，默认值为 "base"
            });
            //执行公交路线关键字查询
            linesearch.search(keyCar, function (status, result) {
                //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
                if (status === "complete" && result.info === "OK") {
                    //查询成功时，result.lineInfo 即为公交线路详细信息
                    var lineArr = result.lineInfo;
                    //循环遍历 lineArr 数组，lineArr 数组包含的是公交线路数据
                    for (var i = 0; i < lineArr.length; i++) {
                        var pathArr = lineArr[i].path; //获取当前线路的路径坐标数据
                        var stops = lineArr[i].via_stops; //获取当前线路途径的站点数据
                        var startPot = stops[0].location; //获取当前线路的起始位置
                        var endPot = stops[stops.length - 1].location; //获取当前线路的终点位置
                        //作为示例，只绘制一条线路,如果当前是第一条线路（i == 0）
                        if (i == 0) {
                            //绘制起点，终点
                            new AMap.Marker({
                                map: mapRef.current, //指定地图对象
                                position: startPot, //起点位置
                                icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
                                zIndex: 10, //起点标记的 z-index 值，用于控制层次关系
                                anchor: "bottom-center", //起点标记的锚点位置
                            });
                            new AMap.Marker({
                                map: mapRef.current,
                                position: endPot, //终点位置
                                icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
                                zIndex: 10,
                                anchor: "bottom-center",
                            });
                            //绘制乘车的路线
                            new AMap.Polyline({
                                map: mapRef.current,
                                path: pathArr, //路径坐标数据
                                strokeColor: "#09f", //线颜色
                                strokeOpacity: 0.8, //线透明度
                                isOutline: true, //显示轮廓线
                                outlineColor: "white", //轮廓线颜色
                                strokeWeight: 6, //线宽
                            });
                        }
                    }
                    //将覆盖物调整到合适视野
                    mapRef.current.setFitView();
                }
            });
        });
    }

    // 移除所有 Marker 标记点的函数


    return (
        <div>

            <div id="container" style={{ height: '300px', width: '100%' }}></div>

            <div className="input-card">




                <div className="input-item">
                    <input
                        type="checkbox"
                        checked={panelBoxVisible}
                        onChange={(e) => {
                            setPanelBoxVisible(e.target.checked)
                            setEndPoint('')
                            setStartPoint('')
                            setIsPanel(false)
                        }}
                    />
                    规划路线
                </div>

            </div>
            {
                panelBoxVisible && <>
                    {/* 路线规划输入框 */}
                    < div className="input-point">
                        <h4>路线规划</h4>
                        <div className="input-item">
                            <input
                                type="text"
                                value={startPoint}
                                onChange={(e) => setStartPoint(e.target.value)}
                                placeholder="请输入起点"

                            />
                        </div>
                        <div className="input-item">
                            <input
                                type="text"
                                value={endPoint}
                                onChange={(e) => setEndPoint(e.target.value)}
                                placeholder="请输入终点"
                            />
                        </div>
                        <button onClick={handleRoutePlanning}>开始规划</button>
                        <button onClick={noHandleRoutePlanning}>取消规划</button>

                    </div>

                    {/* 路线规划结果展示面板 */}
                    {
                        isPanel && <div id="panel" className='box-panel'></div>
                    }
                </>
            }
            {
                isCar &&
                <div className="car-box">
                    <div className='car-title'>
                        <h2 style={{ color: 'grey' }}>{carTab == 1 ? '公交站点查询' : '公交线路查询'}</h2>
                        <span onClick={() => { setCarTab(carTab == 1 ? 0 : 1); setKeyCar('') }} style={{ color: 'gray', fontSize: '12px', cursor: 'pointer' }}>切换</span>
                    </div>

                    <div className="car-input">
                        <div className="car-input-left"><span>{carTab == 1 ? '站名关键字' : '线路名称'}</span></div>
                        <input
                            className='car-input-right'
                            type="text"
                            value={keyCar}
                            onChange={(e) => setKeyCar(e.target.value)}
                        />
                    </div>
                    {
                        carTab == 0 && <div className="car-input">
                            <div className="car-input-left"><span>城市</span></div>
                            <input
                                className='car-input-right'
                                type="text"
                                value={keyCity}
                                onChange={(e) => setKeyCity(e.target.value)}
                                placeholder='默认北京'
                            />
                        </div>
                    }
                    <button onClick={() => { carTab == 1 ? onKeyCar() : onLineCar() }}>查询</button>
                </div>
            }
        </div >
    );
};

export default MapContainer;